<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./css/bootstrap-v4.6.0.css" />
    <link rel="stylesheet" href="./css/login.css" />
  </head>

  <body>
    <script src=" ./js/jquery-3.6.0.js"></script>
    <script src="./login.js"></script>
    <script src="./axios.js"></script>
    <div class="login-box">
      <div class="form-group">
        <label for="username">Account</label>
        <!-- 账号 -->
        <input
          type="text"
          class="form-control"
          id="username"
          autocomplete="off"
        />
        <small id="emailHelp" class="form-text text-muted">
          The available account is
          <strong>admin</strong>
        </small>
      </div>
      <div class="form-group">
        <!-- 密码 -->
        <label for="password">Password</label>
        <input type="password" class="form-control" id="password" />
        <small id="emailHelp" class="form-text text-muted">
          The available password is
          <strong>123456</strong>
        </small>
      </div>
      <button type="submit" class="btn btn-primary" id="btnLogin">
        Submit
      </button>
    </div>

    <script src="./lib/jquery.js"></script>
    <script src="./lib/axios.js"></script>
  </body>
  <!-- 1.需求
1.采集用户填写的数据
2.把采集到的数据提交到服务器 -->
  <!-- 这个题的逻辑是：
1.获取这两个方框上的内容，通过post传送到服务器
2.加一个功能如果用户填写不对弹出提示
3.按enter键也可以提交 -->
  <script>
    // 防止以后要，封装到一个函数里面去
    function postMeg() {
      $('#btnLogin').on('click', function () {
        axios
          .post('http://www.liulongbin.top:3009/api/reg', {
            username: $('#username').val(),
            password: $('#password').val(),
          })
          .then(({ data }) => {
            if (data.status === 200) {
              alert('登录成功');
            } else {
              alert(data.msg);
            }
          });
      });
    }
    
  </script>
</html>
